<template>
    <view class="main">
      <div class="details">
        <Editor
          :value="value"
          :plugins="plugins"
          @change="handleChange"
          :locale="zhHans"
          :upload-images="handleUploadImages1"
        />
      </div>
    </view>
  </template>
  
  <script setup lang="ts">
  import { Editor } from '@bytemd/vue-next'
//   import 'juejin-markdown-themes/dist/juejin.min.css'
  import 'bytemd/dist/index.css'
  import gfm from '@bytemd/plugin-gfm'
  import highlight from '@bytemd/plugin-highlight'
  import zhHans from 'bytemd/locales/zh_Hans.json'
  import gemoji from '@bytemd/plugin-gemoji'
  import mediumZoom from '@bytemd/plugin-medium-zoom'  
  import { defineProps, withDefaults } from 'vue'
  import {request} from '../utils/request'

 
  //添加的插件
  const plugins = [
    gfm(),
    highlight(),
    // gemoji(),
    mediumZoom()
  ]
  import type {
  BytemdPlugin,
  BytemdAction,
  EditorProps,
  BytemdLocale,
  BytemdEditorContext,
} from '../utils/types'
  async function handleImageUpload(
  { editor, appendBlock, codemirror }: BytemdEditorContext,
  uploadImages: NonNullable<EditorProps['uploadImages']>,
  files: File[]
) {
  const imgs = await uploadImages(files)
  const pos = appendBlock(
    imgs
      .map(({ url, alt, title }, i) => {
        alt = alt ?? files[i].name
        return `![${alt}](${url}${title ? ` "${title}"` : ''})`
      })
      .join('\n\n')
  )
  editor.setSelection(pos, codemirror.Pos(pos.line + imgs.length * 2 - 2))
  editor.focus()
}

  //上传图片
  const handleUploadImages = async (files: any) => {
    let imgs: any = []

    // for (let index = 0; index < files.length; index++) {
    debugger

      const item = files[0]
      // let formData = new FormData()
      // formData.append('file', item, 'file')
      console.log('前端图片路径')
      // console.log(formData)

     await uploadFile(item)
        .then(formData => {
          return imgs
          console.log(formData); // 输出正确的 formData
        })
        .catch(error => {
        
          console.error(error); // 输出错误信息
        });
      
    // }


  }
  // const senddaata = (formData:FormData) => {
  //   debugger
  //   return request({
  //       url: "/api/blog/upload",
  //       method: "post",
  //       data: formData
  //   })
  
  //   // return request({
  //   //     url: '/api/blog/upload',
  //   //     method: 'post',
  //   //     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  //   //     data: formData
  //   //   })
  // }


  function uploadFile(file:any) {
    return new Promise((resolve, reject) => {
      const formData = new FormData();
      formData.append('file', file);

      console.info(formData)
      debugger
      return request({
        url: "/api/blog/upload",
        method: "post",
        data: formData
      }).then(r => {
        resolve(formData)
      }).catch(e => {
        reject(e)
      })
    });
  }
  </script>
  
  <style scoped>
  
  </style>
  
  